<template>
  <CommonPage :showHeader="false">
    <article class="flex flex-sub flex-column" v-if="treatInfo">
      <section class="padding-lr padding-top">
        <n-page-header @back="handleBack">
          <template #title>
            <n-button quaternary class="text-xxs" @click="handleBack">返回</n-button>
          </template>
          <template #subtitle>
            {{ getAppointmentType(appointmentInfo.type) }}
            <!--            当前状态：<n-text :style="'color:'+getArticleStatusColor(articleInfo.status)">  {{getArticleStatus(articleInfo.status)}} </n-text>-->
          </template>
          <template #extra>
            <n-space>
              <n-button type="success" round class="padding-lr text-xxs" @click="handlePrint">打印</n-button>
            </n-space>
          </template>
        </n-page-header>
      </section>
      <section ref="resultRef" class="overflow-auto flex flex-sub bg-white flex-column radius-lg  margin-tb padding text-black">
          <n-scrollbar>
            <div class="text-center text-df text-bold">就诊结果</div>
            <n-divider></n-divider>
            <n-list hoverable clickable>
              <n-list-item v-if="appointmentInfo.type===1">
                <n-text type="success" class="text-df text-bold padding-tb-xs">过程报告</n-text>
                <n-descriptions label-placement="left" :column="2" class="text-sm" bordered>
                  <n-descriptions-item v-for="(item,index) in maintainObjectList" :key="index" :label="item.label">
                    {{ treatInfo[item.value] }}
                    <n-text v-if="item.label==='导管外露长度'">cm
                    </n-text>
                  </n-descriptions-item>
                </n-descriptions>
              </n-list-item>
              <n-list-item v-if="appointmentInfo.type===2">
                <n-text type="success" class="text-df text-bold padding-tb-xs">过程报告</n-text>
                <n-descriptions label-placement="left" :column="2" class="text-sm" bordered>
                  <n-descriptions-item v-for="(item,index) in catheterObjectList" :key="index" :label="item.label">
                    {{ treatInfo[item.value] }}
                    <n-text v-if="item.label==='置管暴露长度'||item.label==='导管长度'||item.label==='置管插入长度'">cm
                    </n-text>
                  </n-descriptions-item>
                </n-descriptions>
              </n-list-item>
              <n-list-item v-if="appointmentInfo.type===3">
                <n-text type="success" class="text-df text-bold">过程报告</n-text>
                <n-descriptions label-placement="left" :column="2" class="text-sm" bordered>
                  <n-descriptions-item v-for="(item,index) in extubationObjectList" :key="index" :label="item.label">
                    {{ treatInfo[item.value] }}
                    <n-text v-if="item.label==='留置天数'">天
                    </n-text>
                  </n-descriptions-item>
                </n-descriptions>
              </n-list-item>
              <n-list-item>
                <div class="flex flex-column">
                  <n-text type="success" class="text-df text-bold padding-tb-xs">过程图</n-text>
                  <n-image-group>
                    <n-space>
                      <n-image v-for="(item,index) in treatInfo.images" :src="imagePrefix+item" height="200">
                      </n-image>
                    </n-space>
                  </n-image-group>
                </div>
              </n-list-item>
              <n-list-item>
                <n-text type="success" class="text-df text-bold padding-tb-xs">预约信息</n-text>
                <n-descriptions label-placement="left" :column="1" class="text-sm" bordered>
                  <n-descriptions-item label="医院">
                    {{ articleInfo?.hospital || '-' }}
                  </n-descriptions-item>
                  <n-descriptions-item label="医护">
                    {{ treatInfo.nurseName }}
                  </n-descriptions-item>
                  <n-descriptions-item label="患者">
                    {{ treatInfo.patientName }}
                  </n-descriptions-item>
                  <n-descriptions-item label="就诊时间">
                    {{getStartEndTimeString(appointmentInfo.appointmentTime)  }}
                  </n-descriptions-item>
                  <n-descriptions-item label="在线预约挂号费">
                    {{ appointmentInfo?.price || '-' }}
                  </n-descriptions-item>
                </n-descriptions>
              </n-list-item>
            </n-list>
          </n-scrollbar>
      </section>
    </article>
  </CommonPage>


</template>

<script setup lang="ts">
import CommonPage from "@/components/page/CommonPage.vue";
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import router from "@/router";
import api from "@/api";
import {imagePathPrefix} from '~/settings/common.json'
import {getAppointmentType,getStartEndTimeString} from "@/utils";
import print from 'print-js'
import 'print-js/dist/print.css'
import myMoment from "@/utils/common/myMoment";

const resultRef= ref()
const route = useRoute()
const articleInfo = ref()
const appointmentInfo = ref()
const treatInfo = ref()
const maintainObjectList = ref([
  {
    label: '管路是否通畅',
    value: 'pipelineUnobstructed',
  },
  {
    label: '是否更换敷料',
    value: 'changeDressing',
  },
  {
    label: '是否更换接头',
    value: 'replaceConnector',
  },
  {
    label: '有无阻力',
    value: 'resistance',
  },
  {
    label: '有无并发症',
    value: 'companion',
  },
  {
    label: '处理方法',
    value: 'treatmentProcess',
  },
  {
    label: '是否有回血',
    value: 'bloodReturn',
  },
  {
    label: '导管外露长度',
    value: 'catheterExposedLength',
  },

])
const catheterObjectList = ref([
  {
    label: '疾病',
    value: 'disease',
  },
  {
    label: '是否为首次置管',
    value: 'firstCatheter',
  },
  {
    label: '置管时机',
    value: 'catheterOpportunity',
  },
  {
    label: '导管品牌',
    value: 'catheterBand',
  },
  {
    label: '导管规格',
    value: 'catheterSpecification',
  },
  {
    label: '置管模式',
    value: 'catheterModel',
  },
  {
    label: '导管批号',
    value: 'catheterBatchNum',
  },
  {
    label: '导管长度',
    value: 'catheterLength',
  },
  {
    label: '穿孔方法',
    value: 'punctureMethod',
  },
  {
    label: '置管部位',
    value: 'catheterSite',
  },
  {
    label: '置管手臂',
    value: 'catheterArm',
  },
  {
    label: '置管静脉',
    value: 'catheterVein',
  },
  {
    label: '置管尖端位置',
    value: 'catheterTipPosition',
  },
  {
    label: '置管插入长度',
    value: 'catheterInsertionLength',
  },
  {
    label: '置管暴露长度',
    value: 'catheterExposedLength',
  },
  {
    label: '臂围',
    value: 'armCircumference',
  },
  {
    label: '化疗次数',
    value: 'chemotherapyNum',
  },
])
const extubationObjectList = ref([
  {
    label: '留置天数',
    value: 'indwellingTime',
  },
  {
    label: '导管末端是否完整',
    value: 'endIntact',
  },
  {
    label: '拔管是否顺利',
    value: 'processSmooth',
  },
])
const imagePrefix = imagePathPrefix


onMounted(() => {
  if (route.query.appointmentInfo) {
    //@ts-ignore
    appointmentInfo.value = JSON.parse(decodeURIComponent(route.query.appointmentInfo))
    console.log(appointmentInfo.value)
    getTreat(appointmentInfo.value.treatId, appointmentInfo.value.type)
  }
})

const getTreat = (id: any, type: any) => {
  api.treat.queryByIdType({
    id: id,
    type: type,
  }).then(res => {
    if (res && res.data.code === 0) {
      treatInfo.value = res.data.data
      treatInfo.value.images = JSON.parse(treatInfo.value.images)
      console.log(treatInfo.value)
    }
  })
}
const handleBack = () => {
  router.back()
}

const handlePrint = () => {
  print({
    printable:resultRef.value,
    type:'html',
    header:treatInfo.value.patientName+' 结果报告单'+myMoment().format("yyyy-MM-DD HH:SS"),
    scanStyles:false,

  })
}
const handleFail = () => {
  window.$dialog.info({
    title: '确定不通过此文章？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      api.article.fail({
        id: articleInfo.value.id
      }).then(res => {
        if (res && res.data.code === 0) {
          articleInfo.value.status = 3
          window.$message.success(res.data.msg)
        }
      })
    }
  })

}
</script>

<style scoped>

</style>